{% extends 'scm/base.html' %}

{% block content %}

<div class="container-fluid">

    <!-- HEADER -->

    <div class="d-flex justify-content-between align-items-center mb-3">

        <h3>Goods Received</h3>

        <a href="{% url 'create_gr' %}" class="btn btn-secondary">
            <i class="bi bi-plus-lg"></i>
            Create Goods Receipt
        </a>

    </div>


    <!-- TABLE CONTAINER -->

    <div class="card table-container">

        <div class="card-body">

            <div class="table-responsive">

                <table class="table align-middle" id="grTable">

                    <thead>

                        <tr>
                            <th>GR No</th>
                            <th>GR Date</th>
                            <th>PO No</th>
                            <th>Warehouse</th>
                            <th>Received By</th>
                            <th>Status</th>
                            <th class="text-center">Action</th>
                        </tr>

                    </thead>


                    <tbody>

                        {% for item in grs %}

                        <tr>

                            <td>
                                {{ item.gr_no }}
                            </td>

                            <td>
                                {{ item.gr_date|date:"d-m-Y" }}
                            </td>

                            <td>
                                {{ item.po.po_no }}
                            </td>

                            <td>
                                {{ item.warehouse }}
                            </td>

                            <td>
                                {{ item.received_by }}
                            </td>

                            <td>
                                {{ item.status }}
                            </td>

                            <td class="text-center">
                                <a href="{% url 'gr_print' item.id %}"
                                   class="btn btn-secondary btn-sm"
                                   title="Print"
                                   target="_blank"
                                   rel="noopener noreferrer">
                                    <i class="bi bi-printer"></i>
                                </a>
                            </td>

                        </tr>


                        {% empty %}

                        <tr>

                            <td colspan="7"
                                class="text-center">

                                No Goods Receipt found.

                            </td>

                        </tr>

                        {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</div>


<style>

/* =========================================
   PETROGL TABLE CONTAINER
   ========================================= */

.table-container {
    background-color: #dee2e6;
    border: none !important;
    box-shadow: none !important;
    padding: 10px;
}


/* =========================================
   GR TABLE
   ========================================= */

#grTable {
    background-color: #ffffff;
    border: none !important;
    border-collapse: collapse !important;
    margin-bottom: 0;
}


/* =========================================
   HEADER
   ========================================= */

#grTable thead {
    background-color: #56636f;
}


#grTable thead th {
    background-color: #56636f;
    color: #ffffff;
    font-weight: 600;

    border: none !important;
}


/* =========================================
   BODY
   ========================================= */

#grTable tbody td {
    background-color: #ffffff;

    border-top: none !important;
    border-right: none !important;

    border-bottom: 1px solid #eef0f2 !important;
    border-left: 1px solid #eef0f2 !important;

    vertical-align: middle;
}


/* First column */

#grTable tbody td:first-child {
    border-left: none !important;
}


/* Last row */

#grTable tbody tr:last-child td {
    border-bottom: none !important;
}


/* Hover */

#grTable tbody tr:hover td {
    background-color: #f8f9fa;
}

</style>

{% endblock %}